@import './design.theme.less';

@prefix-composite: design-composite;
@prefix-canvas: design-canvas;
@prefix-magnify: design-magnify-pane;
@prefix-narrow: design-narrow-pane;
@prefix-settings: design-settings;

.getOverflow() {
  overflow-x: hidden;
  overflow-y: auto;
}

/* 左侧组件 */
.@{prefix-composite}-layout {
  height: 100%;
  border-right: 1px solid #d9d9d9;

  .@{prefix-composite}-pane {
    padding: 0.5rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    cursor: pointer;
    transition: 300ms;
  }
}

/* 左侧放大pane */
.@{prefix-magnify}-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .@{prefix-magnify}-header {
    padding: 0.6rem;
    line-height: 1.25rem;
    color: #666;
    border-bottom: 1px solid #d9d9d9;

    .@{prefix-magnify}-title {
      float: left;
      font-size: 1.25rem;
      white-space: nowrap;
    }

    .@{prefix-magnify}-icon {
      float: right;
      font-size: 1rem;
      cursor: pointer;
    }

    .@{prefix-magnify}-icon-hover {
      transition: 300ms;

      &:hover {
        transform: rotate(90deg);
      }
    }
  }

  .@{prefix-magnify}-content {
    flex: auto;
    overflow-x: hidden;
    overflow-y: auto;

    .ant-spin-nested-loading {
      height: 100%;

      .ant-spin-container {
        height: 100%;

        .ant-collapse {
          border: none;
          background-color: #ffffff;

          .ant-collapse-content > .ant-collapse-content-box {
            padding: 0px;
          }
        }

        .ant-collapse > .ant-collapse-item > .ant-collapse-header {
          padding: 0.3rem 0.5rem;
          background-color: #fafafa;
        }
      }
    }
  }
}

/* 左侧缩小pane */
.@{prefix-narrow}-layout {
  height: 100%;
  width: 100%;
  .getOverflow();

  .ant-spin-nested-loading {
    height: 100%;

    .ant-spin-container {
      height: 100%;
      .getOverflow();

      .@{prefix-narrow}-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem;
        font-size: 1.5rem;
        cursor: pointer;
      }
    }
  }
}

/* 中间画布 */
.@{prefix-canvas}-layout {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;

  .@{prefix-canvas}-header {
    margin: 0.45rem 0rem;
    padding: 0px 0.25rem;

    .@{prefix-canvas}-header-left {
      float: left;

      button {
        margin-right: 0.25rem;

        .anticon {
          font-size: 0.75rem;
        }
      }
    }

    .@{prefix-canvas}-header-right {
      float: right;

      button {
        margin-right: 0.25rem;

        .anticon {
          font-size: 0.75rem;
        }
      }
    }
  }

  .@{prefix-canvas}-content {
    flex: auto;
    overflow: hidden;
    position: relative;
  }
}

/* 右侧设置框 */
.@{prefix-settings}-layout {
  height: 100%;
  width: 100%;
  display: flex;

  .@{prefix-settings}-btn {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .@{prefix-settings}-btn-icon {
      transition: 500ms;

      &:hover {
        .anticon-setting {
          transform: rotate(90deg);
        }
      }
    }
  }

  .@{prefix-settings}-pane {
    width: 18rem;
    height: 100%;
    background-color: #ffffff;
    border-left: 1px solid #d9d9d9;
  }
}

.ivr-pane-col {
  background: #ffffff;
  padding: 0.5rem;
  transition: 300ms;
  cursor: pointer;

  .ivr-pane-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ivr-pane-icon-title {
    text-align: center;
    font-size: 0.75rem;
  }
}

.design-collapse-box {
  width: 100%;
  height: 100%;
  padding: 0rem 1rem;
  margin: 0.5rem 0rem;

  .ant-form {
    .ant-form-item {
      margin-bottom: 0.5rem;
    }
  }

  .design-collapse-color {
    float: right;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 3px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    padding: 0.33rem;
  }
}
